<template>
    <div class="Breadcrumb">
        <el-breadcrumb separator="/" class="biaoqian">
            <el-breadcrumb-item :to="{ path: '/studentInterface' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>期末考试安排</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
    </div>
    <div class="showUnTicketInfo">
        <div class="box">
            <el-form ref="queryForm" size="middle" :inline="true" style="padding-left: 20px">
                <el-form-item label="课程名称">
                    <el-input v-model="queryForm.courseName" placeholder="请输入课程名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="考试地点">
                    <el-input v-model="queryForm.classroomName" placeholder="考试地点" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="考试班级">
                    <el-input v-model="queryForm.className" placeholder="请输入考试班级" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item>
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button @click="handleSearch" type="primary" :icon="Search" size="mini">搜索</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button @click="handleReset" :icon="Refresh" size="mini">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
        <div class="box-content">
            <el-table :data="dataList" height="450" style="width: 100%">
                <el-table-column label="课程名称" prop="courseName" align="center" />
                <el-table-column label="考试时间" prop="time" align="center" />
                <el-table-column label="考试地点" prop="classroomName" align="center" />
                <el-table-column label="监考员教师" prop="invigilatorName" align="center" />
                <el-table-column label="考试人数" prop="studentCount" align="center" />
                <el-table-column label="考试班级" prop="className" align="center" />
            </el-table>
            <div class="pagination">
                <el-pagination layout="prev, pager, next" :total=pageTotal :page-size="pageSize"
                    v-model:current-page="curPage" />
            </div>
        </div>
    </div>

</template>

<script>
import api from '@/api/api';
import { Delete, Edit, Search, Share, Upload, Refresh, Plus, Check, Close } from '@element-plus/icons-vue'

export default {
    mounted() {
        this.getData()
    },
    data() {
        return {
            dataList: [],
            curPage: 1,
            pageSize: 5,
            pageTotal: 0,
            queryForm: {
                'courseName': '',
                'classroomName': '',
                'className': '',
            },
        }
    },
    methods: {
        getData() {
            api.final_exam.page_by_student_id(sessionStorage.getItem('userid'), this.curPage, this.pageSize)
                .then((res) => {
                    this.dataList = res.data.data.records
                    this.pageTotal = res.data.data.total
                })
                .catch((err) => {
                    console.log(err)
                })
        }, 
        handleSearch() {
            this.getData()
        },
        handleReset() {
            this.queryForm.courseName = ''
            this.queryForm.classroomName = ''
            this.queryForm.className = ''
            this.getData()
        },
    },
    watch: {
        curPage(newValue, oldValue) {
            this.getData()
        }
    },
    computed: {
        Search() {
            return Search
        },
        Refresh() {
            return Refresh
        },
        Plus() {
            return Plus
        },
        Edit() {
            return Edit
        },
        Delete() {
            return Delete
        },
        Check() {
            return Check
        },
        Close() {
            return Close
        }
    }


}
</script>